import React, { useState, useEffect } from 'react';
import { useEffectOnce } from 'react-use';
import { connect } from 'umi';
import { viewUtils } from '@/utils/arcgis';
import styles from '../citySketch/index.less';

const SchemeForm = ({ dispatch, data, sketchViewModel }) => {
  let dataList = Object.keys(data || {});
  const [view, setView] = useState<any>(null);
  // console.log('schemeForm-sketchViewModel', sketchViewModel);
  useEffectOnce(() => {
    dispatch({
      type: 'scheme/updateData',
    });
    const initialize = async () => {
      const view = await viewUtils.isViewReady();
      setView(view);
    };
    initialize();
  });
  function changeSchemeItem(item) {
    let graphic = data[item][0];
    console.log('每一个方案', graphic);
    sketchViewModel.update(graphic, {
      tool: 'reshape',
    });

    view.goTo({
      target: graphic.geometry,
    });
    // sketchViewModel.update(graphic, { tool: 'move' });
    // sketchViewModel.update(graphic, { selected: true });
  }
  return (
    <div
      className="side-panel2"
      style={{ position: 'absolute', left: '420px', top: '435px', width: '200px' }}
    >
      <div className="side-panel2-title"> 方案列表</div>
      <div
        className="side-panel2-body"
        style={{
          padding: '15px 10px 25px',
        }}
      >
        <div className={styles.schemeBody}>
          {dataList.length ? (
            dataList.map(item => {
              return (
                <div key={item} className={styles.schemeItem} onClick={e => changeSchemeItem(item)}>
                  {item}
                </div>
              );
            })
          ) : (
            <div className={styles.schemeNone}>暂无方案</div>
          )}
        </div>
      </div>
    </div>
  );
};

export default connect(({ scheme }) => {
  return {
    data: scheme.schemeData,
    sketchViewModel: scheme.sketchViewModel,
  };
})(React.memo(SchemeForm));
